<template>
  <view class="record-container">
    <!-- 顶部查询栏 -->
    <view class="header-bar">
      <input
        class="search-input"
        v-model="searchProject"
        placeholder="输入项目名称"
      />
      <button class="search-btn" @click="handleSearch">查询</button>
    </view>

    <!-- 护理项目列表 -->
    <view v-for="(item, index) in recordList" :key="index" class="card">
      <view class="card-header">
        <text class="project-name">{{ item.nursingProject.name }}</text>
        <text class="caretaker-name">{{ item.user.username }}</text>
      </view>
      <view class="card-content">
        <text>护理时间：{{ formatTime(item.nursingRecord.nursingTime) }}</text>
        <text>护理数量：{{ item.nursingRecord.quantity }}</text>
        <text>价格：￥{{ item.nursingProject.price }}</text>
        <text>周期：{{ item.nursingProject.cycle }}</text>
        <text>频率：{{ item.nursingProject.frequency }}</text>
        <text>描述：{{ item.nursingProject.description }}</text>
      </view>
      <view class="card-footer">
        <button
          class="remove-btn"
          @click="removeRecord(item.nursingRecord.recordId)"
        >
          移除
        </button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "nursingRecordView",
  data() {
    return {
      clientId: null,
      searchProject: "", // 搜索框内容
      recordList: [],

      // 分页控制
      page: 1,
      size: 5,
      hasMore: true,
      loading: false,
    };
  },
  onLoad(options) {
    this.clientId = options.clientId || null;
    this.resetAndLoad(false); // 初始不清空搜索框
  },
  onPullDownRefresh() {
    this.resetAndLoad(true); // 下拉刷新时清空搜索框
  },
  onReachBottom() {
    if (this.hasMore && !this.loading) {
      this.fetchRecords();
    }
  },
  methods: {
    // 重置并加载数据，clearSearch 参数决定是否清空搜索框
    resetAndLoad(clearSearch) {
      if (clearSearch) {
        this.searchProject = ""; // 清空搜索框
      }
      this.page = 1;
      this.hasMore = true;
      this.recordList = [];
      this.fetchRecords();
    },

    // 处理查询按钮点击事件
    handleSearch() {
      this.resetAndLoad(false); // 点击查询时不清空搜索框
    },

    // 查询护理记录
    fetchRecords() {
      if (!this.hasMore || this.loading) {
        uni.stopPullDownRefresh();
        return;
      }
      this.loading = true;
      uni.request({
        url: "http://localhost:9000/nursingRecord/pageNursingRecord",
        method: "GET",
        data: {
          cur: this.page,
          number: this.size,
          clientId: this.clientId,
          name: this.searchProject,
        },
        success: (res) => {
          if (res.data.status === 200 && Array.isArray(res.data.data)) {
            const newList = res.data.data || [];
            if (this.page === 1) {
              this.recordList = newList;
            } else {
              this.recordList = this.recordList.concat(newList);
            }

            if (newList.length < this.size) {
              this.hasMore = false;
            } else {
              this.page += 1;
              this.hasMore = true;
            }
          } else {
            uni.showToast({ title: "查询失败", icon: "none" });
            this.hasMore = false;
          }
        },
        fail: () => {
          uni.showToast({ title: "网络错误", icon: "none" });
          this.hasMore = false;
        },
        complete: () => {
          this.loading = false;
          uni.stopPullDownRefresh();
        },
      });
    },

    // 格式化时间
    formatTime(dateStr) {
      const date = new Date(dateStr);
      return date.toLocaleString();
    },

    // 移除护理记录
    removeRecord(recordId) {
      uni.showModal({
        title: "确认移除",
        content: "是否确认移除该护理记录？",
        success: (modalRes) => {
          if (modalRes.confirm) {
            uni.request({
              url: "http://localhost:9000/nursingRecord/deleteNursingRecord",
              method: "POST",
              header: {
                "content-type": "application/x-www-form-urlencoded",
              },
              data: {
                recordId,
              },
              success: (res) => {
                if (res.data.status === 200) {
                  uni.showToast({ title: "删除成功", icon: "success" });
                  this.resetAndLoad(false); // 保持搜索框内容，重新加载数据
                } else {
                  uni.showToast({ title: "删除失败", icon: "none" });
                }
              },
              fail: () => {
                uni.showToast({ title: "网络错误", icon: "none" });
              },
            });
          }
        },
      });
    },
  },
};
</script>

<style scoped>
.record-container {
  padding: 20rpx;
  background-color: #fffbe6;
  min-height: 100vh;
}

.header-bar {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.search-input {
  flex: 1;
  height: 70rpx;
  padding: 0 20rpx;
  background-color: #fff;
  border-radius: 35rpx;
  margin-right: 20rpx;
  border: 1rpx solid #faad14;
}

.search-btn {
  background-color: #faad14;
  color: #fff;
  padding: 0 30rpx;
  height: 70rpx;
  line-height: 70rpx;
  border-radius: 35rpx;
  font-size: 28rpx;
  border: none;
}

.card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12rpx;
}

.project-name {
  font-weight: bold;
  font-size: 32rpx;
  color: #faad14;
}

.caretaker-name {
  color: #1890ff;
  font-size: 28rpx;
}

.card-content text {
  display: block;
  font-size: 26rpx;
  color: #666;
  margin-bottom: 8rpx;
}

.card-footer {
  margin-top: 12rpx;
  text-align: right;
}

.remove-btn {
  background-color: #ff4d4f;
  color: white;
  padding: 10rpx 24rpx;
  border-radius: 30rpx;
  font-size: 26rpx;
  border: none;
}
</style>
